<template>
<!-- 校园 -->
  <div class="about" style="position: sticky;top:100px;width:100%;"  >
    <van-tabs  title-inactive-color="#838383" swipeable v-model="active" @change="setIndex(active)">
      <van-tab v-for="(item,index) in classList" :title="item.cat_name" :dot="active==index">
        <list :list="itemLIst"></list>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import list from "@/components/list";
import {mapGetters,mapState,mapActions,mapMutations} from 'vuex'
export default {
  data(){
    return{
      active:0
    }
  },
  components:{
    list
  },
  computed:{
    ...mapState('school',['classList']),
    ...mapGetters('school',['itemLIst']),
  },
  mounted(){
    this.getclassList();
  },
  methods:{
    ...mapActions('school',['getclassList']),
    ...mapMutations('school',['setIndex'])
  }
}

</script>
<style scoped lang="scss">
.about ::v-deep .van-tab{
  font-size:16px;
}
.about ::v-deep .van-tab--active{
  font-size:18px;
  font-weight:400;
}
.about ::v-deep .van-tabs__wrap{
  height:28px;
}

</style>